<template>
  <div class="container">
    <a-row :gutter="20">
      <!-- 我的应用 -->
      <a-col :span="18">
        <div class="right-side2">
          <a-row>
            <a-col :span="24">
              <a-card title="我的应用" :bordered="true">
                <!-- <a slot="extra" @click="draggableDisabled = !draggableDisabled">自定义应用</a> -->
                <a slot="extra" @click="addAppDialog">
                  <a-button icon="appstore">添加应用</a-button>
                </a>
                <Kanban @GoUrl="GoUrl" :rolVal="1" :key="1" :list="photoINfo" :group="group" :disabled="draggableDisabled"
                  class="kanban todo lastmarginbottom" header-text="Todo" />
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <!-- 我的日历 -->
      <a-col :span="6">
        <div>
          <div class="right-side">
            <a-row type=" flex" justify="space-around">
              <a-col :span="24">
                <a-card title="我的日历" :bordered="false" style="width: 100%">
                  <div :style="{
                      width: '100%',
                      border: '1px solid #d9d9d9',
                      borderRadius: '4px',
                    }">
                    <a-calendar :fullscreen="false" @select="getDate" />
                  </div>
                </a-card>
              </a-col>

              <a-col :span="24">
                <a-card title="待办事项" :bordered="false" style="width: 100%; margin-top: 16px">
                  <a-radio-group slot="extra" v-model="value" @change="onChange" style="float: right; margin-left: auto">
                    <a-radio-button :value="0"> 今日</a-radio-button>
                    <a-radio-button :value="1"> 一星期</a-radio-button>
                    <a-radio-button :value="2"> 一个月</a-radio-button>
                  </a-radio-group>

                  <a-list bordered :dataSource="list" class="dt_list">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <!-- 复选框 -->
                      <a-checkbox @change="(e) => {
                          cbStatusChanged(e, item.id);
                        }
                        ">
                        {{ item.content }}
                      </a-checkbox>
                      <!-- 删除链接 -->
                      <a slot="actions" @click="removeItemById(item.id, item.state)">
                        <span v-if="item.state === 1" style="color: #ff4d4f !important;">清理</span>
                        <span v-if="item.state === 0">完成</span>
                      </a>
                    </a-list-item>

                    <!-- footer区域 -->
                    <div class="footer" slot="footer">
                      <span>共{{ countSize }}条</span>
                      <a @click="clean" style="color: #49e1e1">清除已完成</a>
                    </div>
                  </a-list>
                  <!-- 我的邮件 -->
                  <div title="我的邮件" :bordered="false" style="width: 100%; margin-top: 16px">
                    <p v-for="(item, index) in myEmail" :key="index" @click="readMessage(index)">
                      <i class="el-icon-message" style="font-size: 20px"></i>
                      {{ item.title }}
                    </p>
                    <span>共<i class="text-b-g">{{ emailCount }}</i>封邮件</span>
                  </div>
                </a-card>
              </a-col>

              <!-- <a-col :span="24">
          <a-card title="我的邮件" :bordered="false" style="width: 100%; margin-top: 16px">
            <p v-for="(item, index) in myEmail" :key="index" @click="readMessage(index)">
              <i class="el-icon-message" style="font-size: 20px"></i>
              {{ item.title }}
            </p>
            <span>共{{ emailCount }}封邮箱</span>
          </a-card>
        </a-col> -->
            </a-row>
          </div>
        </div>

      </a-col>
    </a-row>

    <!-- 添加应用的对话框 -->
    <a-modal v-model="addAppDialogVisible" title="添加应用" @ok="handleOk" width="86%">
      <form class="myapp-container">
        <div v-for="(x, index) in allPhotoINfo" :key="index" :hoverable="false" class="myapp-selection">
          <label class="myapp-selection-center">
            <img :src="x.iconBase64" />
            <span>{{ x.appName }}{{ x.name }}</span>
            <input type="checkbox" />
          </label>
        </div>
      </form>
    </a-modal>
  </div>
</template>

<script>
import Kanban from '@/components/Kanban'
import HttpHome from "../../api/home";

import HttpWorkPlace from "../../api/workPlace";
import { formateDate } from "../../utils/DateUtils";
import moment from "moment";

export default {
  name: "home",
  components: {
    Kanban
  },
  data() {
    return {
      replaceFields: {
        title: 'appName',
        key: "id"
      },
      group: 'mission',
      list1: [
        { name: 'Mission', id: 1 },
        { name: 'Mission', id: 3 },
        { name: 'Mission', id: 3 },
        { name: 'Mission', id: 4 }
      ],
      list2: [
        { name: 'Mission', id: 5 },
        { name: 'Mission', id: 6 },
        { name: 'Mission', id: 7 },
        { name: 'Mission', id: 8 },
        { name: 'Mission', id: 9 },
        { name: 'Mission', id: 10 },
        { name: 'Mission', id: 11 }
      ],
      photoINfo: [],//我的应用
      allPhotoINfo: [],//我的所有应用
      value: 2,
      // 所有的任务列表
      list: [],
      draggableDisabled: true,
      // 文本框的内容
      inputValue: "",
      viewKey: "all",
      dateTime: formateDate(new Date(), "yyyy-MM-dd 00:00:00"),
      state: null,
      countSize: 0,
      visible: false,
      emailCount: 0,
      dialogVisible: false,
      xiangxiMessage: {},
      needToBeDealtWithStartDate: '',
      needToBeDealtWithEndDate: '',
      remindDate: '',
      address: '',
      maxAppsOrderBy: {},
      nowIp: window.location.host,
      kjrk: [],
      AppsOrderByInsert: {
        appsId: 'appsId',
        orderby: 1,
      },
      myEmail: [],
      // 控制添加应用的对话框的显示与隐藏
      addAppDialogVisible: false,
      // 数形控件数据
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
    };
  },
  watch: {
    //添加应用的树形控件数据
    checkedKeys(val) {
      console.log('onCheck', val);
    },
    photoINfo() {
      let dataJson = JSON.stringify({
        appFirst: this.photoINfo,
        appSecond: this.kjrk
      })
      this.maxAppsOrderBy.jsonContent = dataJson
      // HttpHome.saveOrUpdate(this.maxAppsOrderBy).then(res => {
      //   // console.log(res)

      // }, err => {
      //   console.log(err);
      // });

      // console.log(dataJson)
    },
    // kjrk(newData, old) {
    //   console.log(newData, old)
    // }
  },
  beforeMount() {
    var urls = "";
    var redirect_uri = localStorage.getItem("redirect_uri");
    if (redirect_uri) {
      urls = redirect_uri;
      localStorage.removeItem("redirect_uri")
    }
    if (urls) {
      window.location.href = urls
    }
  },
  created() { },
  mounted() {

    this.initFoList();
    this.emailCount = this.myEmail.length;

    // this.loadInitData()

    HttpHome.sortAppList().then(res => {
      if (res.data.code == 0) {
        const arr = res.data.data.appList
        this.allPhotoINfo = arr
        this.photoINfo = arr.map(arr => {
          if (arr.status == 1) {
            return arr
          }
        })
      } else {

      }

    })
    // this.appsOrderByInsert();
  },
  methods: {
    //添加应用的树形控件数据
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },
    // appsOrderByInsert() {
    //   HttpAppsOrderBy.insert(this.AppsOrderByInsert);
    // },
    handleClose() {
      this.dialogVisible = false
    },
    moment,
    GoUrl(item) {

      if (item.protocol === 'Basic' || item.inducer === 'SP') {
        window.open(item.loginUrl)
        // window.location.href=process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id
        return;
      } else if (item.url) {
        this.$router.push({ path: item.url })
      } else {
        // window.location.href=process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id
        window.open(process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id);
      }
    },

    //初始化我的应用
    loadInitData() {
      HttpWorkPlace.getAppList().then((res) => {
        if (res.data.code == 0) {
          this.photoINfo = res.data.data
        }
      }).catch((err) => {
        console.error(err);
      })

    },
    showModal() {
      this.visible = true;
    },
    skipToModel(val) {
      console.log(val.url);
      this.$router.push({ path: val.url })
      // window.location.href = this.kjrk[val].url;
    },
    readMessage(val) {
      this.xiangxiMessage = this.myEmail[val];
      this.dialogVisible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    // 显示列表
    // infoList() {
    //   if (this.viewKey === 'all') {
    //     return this.list
    //   } else if (this.viewKey === 'undone') {
    //     return this.list.filter(item => !item.done)
    //   } else if (this.viewKey === 'done') {
    //     return this.list.filter(item => item.done)
    //   } else {
    //     return this.list
    //   }
    // },
    initFoList() {
      var para = {
        selectType: this.value,
        backlogdate: this.dateTime,
        state: this.state,
      };
      HttpHome.getThing(para).then((res) => {
        this.list = res.data.data.list;
        this.countSize = res.data.data.size;
      });
    },
    getDate(date) {
      this.dateTime = formateDate(date._d, "yyyy-MM-dd 00:00:00");
      this.visible = true;
    },
    caseDate(date) {
      this.dateTime = formateDate(date._d, "yyyy-MM-dd hh:mm:ss");
      return this.dateTime;
    },
    onChange(e) {
      this.value = e.target.value;
      this.initFoList();
    },

    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    addItemToList() {
      if (this.inputValue.trim().length == 0) {
        return this.$message.warning("添加待办事项不能为空");
      } else {
        // 添加列表项
        const obj = {
          content: this.inputValue.trim(), //待办事件内容
          backlogdate: this.dateTime, // 待办事情时间
          needtobedealtwithstartdate: this.caseDate(this.needToBeDealtWithStartDate),//待办开始时间
          needtobedealtwithenddate: this.caseDate(this.needToBeDealtWithEndDate),//待办结束时间
          reminddate: this.remindDate,//待办提醒时间
          address: this.address//添加待办是的地址
        };
        HttpHome.postThing(obj).then((res) => {
          this.list.push(res.data.data);
          this.countSize++;
          this.visible = false;
        });
        this.inputValue = "";
      }
    },
    removeItemById(id, state) {
      // 根据id查看对应项的索引
      const i = this.list.findIndex((x) => x.id === id);

      if (state === 0) {
        // 完成
        HttpHome.updateThing({ id: id, state: 1 }).then((res) => {
          if (res.data.data) {
            this.countSize--;
            this.list[i].state = 1;
          }
        });
      } else {
        HttpHome.deleteThing({ id: id }).then((res) => {
          if (res.data.data) {
            this.countSize--;
            // 根据索引，删除对应元素
            if (i !== -1) {
              this.list.splice(i, 1);
            }
          }
        });
      }
    },
    cbStatusChanged(e, d) {
      //监听复选框是否选中
      // const param = {
      //   id: id,
      //   status: e.target.checked
      // }
      // const i = this.list.findIndex(x => x.id === param.id)
      // if (i !== -1) {
      //   this.list[i].done = param.status
      // }
    },
    clean() {
      HttpHome.deleteByUserId();
      this.initFoList();
    },
    changeList(key) {
      this.viewKey = key;
      if (this.viewKey == "all") {
        this.state = null;
      } else if (this.viewKey == "undone") {
        this.state = 0;
      } else if (this.viewKey === "done") {
        this.state = 1;
      }
      this.initFoList();
    },
    // 添加应用
    addAppDialog() {
      //获取所有的应用数据

      //展示对话框
      this.addAppDialogVisible = true
    }
  },
};
</script>


<style lang="less" scoped>
.myapp-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;

  .myapp-selection {
    width: 20%;
    min-width: 230px;
    height: 100px;
    padding: 10px;
    //flex-grow: 1;
    box-sizing: border-box;

    .myapp-selection-center {
      position: relative;
      display: block;
      height: 100%;
      border-radius: 6px;
      border: 1px solid #e2e2e2;

      img {
        position: absolute;
        left: 16px;
        top: 16px;
        width: 48px;
        height: 48px;
      }

      span {
        display: inline-block;
        position: absolute;
        left: 80px;
        top: 18px;
        width: 50%;
        height: 44px;
        overflow: hidden;
      }

      input {
        outline: none;
        -webkit-appearance: none;
        -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
        display: inline-block;
        position: absolute;
        width: 26px;
        height: 26px;
        right: 16px;
        top: 26px;
        text-align: center;
        vertical-align: baseline;
        line-height: 26px;
        border-radius: 50%;
        border: 1px solid #e2e2e2;
        color: #fff;
        background-color: #fff;
      }

      input[type="checkbox"]::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        color: #fff;
        box-sizing: border-box;
      }

      input[type="checkbox"]:checked::before {
        content: "\2713";
        position: absolute;
        width: 26px;
        height: 26px;
        right: 0;
        top: 0;
        border: 1px solid #2acc95;
        color: #fff;
        font-size: 1.2rem;
        border-radius: 50%;
        background-color: #2acc95;
      }
    }
  }

}

.container {
  padding: 2px 10px;
  /*padding-bottom: 0; */
  /* display: flex; */
  /* flex: 1;
}

.left-side {
  flex: 1;
  /* display: flex;
  overflow: auto; */
}

.right-side {
  /* width: 400px;
  margin-left: 16px; */
}

.right-side2 {
  /* width: 300px; */
  /* margin-right: 16px; */

}

.my_ipt {
  width: 80%;
  margin-right: 10px;
}

.dt_list {
  width: 100%;
  /* margin-top: 10px; */
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listyle {
  width: calc(25% - 16px);
  height: 58px;
  border: 1px solid rgba(126, 134, 142, 0.16);
  border-radius: 8px;
  float: left;
  margin: 0 8px 16px;
  cursor: pointer;
  box-sizing: border-box;
}

.bottonfast:hover {
  background: #ebebeb !important;
}

.bottonfast {
  height: 100%;
  width: 90%;
  border: none;
  text-align: left;
  border-radius: 8px;
  background: #fff !important;
  cursor: pointer;
}

.board {
  width: 100%;
  /* margin-left: 20px; */
  display: flex;
  height: auto;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
}

.todo .board-column-header {
  background: #4a9ff9;
}

.working .board-column-header {
  background: #f9944a;
}

.done .board-column-header {
  background: #2ac06d;
}

.ant-card-grid {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  /* padding: 0px !important; */
}

.text-b-g {
  display: inline-block;
  padding: 0 3px;
  font-weight: 600;
  color: #13c2c2;
}
</style>
